@charset 'UTF-8';

.container {
    width: 1200px;
    margin: 0 auto;
}



@media screen and (min-width:1000px) {
.join_jlb_warp {
    .main_pic {
        img {
            width: 100%;
            height: auto;
        }

    }

    .main_pic_b {
        visibility: visible;
        animation-duration: 1s;
        animation-delay: 0.2s;
        animation-name: fadeInUp;

        .container {
            padding-left: 0;
            padding-right: 0;

            .cons {
                .title {
                    margin-top: 50px;
                    padding-bottom: 10px;
                    border-bottom: 1px solid #ccc;
                    color: #6e7276;
                }

                .con {
                    margin-top: 40px;

                    img {
                        width: 100%;
                        height: auto;
                    }
                }
            }
        }
    }

    .recruitment {
        margin-top: 40px;

        .container {
            .cons {
                display: flex;
                justify-content: space-between;

                .con {
                    width: 48%;
                    height: 280px;
                    visibility: visible;
                    animation-duration: 1s;
                    animation-delay: 0.1s;
                    background-repeat: no-repeat;
                    background-size: cover;
                    background-position: center;

                    h2 {
                        color: white;
                        font-size: 38px;
                        margin-bottom: 30px;
                    }
                    a {
                        display: inline-block;
                        border: 2px solid #fff;
                        color: #fff;
                        border-radius: 100px;
                        padding: 3px 10px;
                        text-decoration: none;
                        &:hover {
                            background: rgba(255,255,255,0.3);
                        }
                    }

                    &:nth-child(1) {
                        background-image: url(../images/join_jlb1.3.png);
                        animation-name: fadeInLeft;

                        // justify-items: flex-start;
                    }

                    &:nth-child(2) {
                        // justify-items: flex-end;
                        background-image: url(../images/join_jlb1.4.png);
                        animation-name: fadeInRight;
                    }
                }
            }
        }
    }
}
}

@media screen and (max-width:750px) {
    html {
        font-size: calc(100vw/7.5);
    }
    .container {
        width: 355px;
        margin: 0 auto;
        overflow: hidden;
    }
    .join_jlb_warp {
        .main_pic {
            position: relative;
            img {
                position: absolute;
                height: 150px;
                width: auto;
                left: 50%;
                margin-left: -365px;
            }
    
        }
    
        .main_pic_b {
            visibility: visible;
            animation-duration: 1s;
            animation-delay: 0.2s;
            animation-name: fadeInUp;
            
    
            .container {
                padding-left: 0;
                padding-right: 0;
                
    
                .cons {
                    margin-top: 180px;
                    .title {
                        margin-top: 50px;
                        padding-bottom: 10px;
                        border-bottom: 1px solid #ccc;
                        color: #6e7276;
                        h2 {
                            font-size: 26px;
                        }
                        
                    }
    
                    .con {
                        margin-top: 40px;
    
                        img {
                            height: 190px;
                            object-fit: cover;
                        }
                    }
                }
            }
        }
    
        .recruitment {
            margin-top: 40px;
    
            .container {
                .cons {
                    display: flex;
                    justify-content: space-between;
    
                    .con {
                        width: 48%;
                        height: 180px;
                        // height: 100%;
                        visibility: visible;
                        animation-duration: 1s;
                        animation-delay: 0.1s;
                        background-repeat: no-repeat;
                        background-size: cover;
                        background-position: center;
    
                        h2 {
                            color: white;
                            font-size: 25px;
                            margin-bottom: 30px;
                            margin-top: 70px;
                        }
                        a {
                            display: inline-block;
                            border: 2px solid #fff;
                            color: #fff;
                            border-radius: 100px;
                            padding: 3px 10px;
                            text-decoration: none;
                            &:hover {
                                background: rgba(255,255,255,0.3);
                            }
                        }
    
                        &:nth-child(1) {
                            background-image: url(../images/join_jlb1.3.png);
                            animation-name: fadeInLeft;
    
                            // justify-items: flex-start;
                        }
    
                        &:nth-child(2) {
                            // justify-items: flex-end;
                            background-image: url(../images/join_jlb1.4.png);
                            animation-name: fadeInRight;
                        }
                    }
                }
            }
        }
    }
}